<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>发布商品</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href="../css/sm.min.css">
		<link rel="stylesheet" href="../css/sm-extend.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<style type="text/css">
			#index {
				margin-top: 0.4rem;
			}
			.infinite-scroll-preloader {
				margin-top: -20px;
			}
			/* 卡片内容加边距 */
			.my-cont{
				padding:.2rem .99rem;
				text-align:center
				
			}
			/* 背景色白色 */
			.page, .page-group{
				background-color: white;
			}
			/* 去掉卡片边距 */
			.card{
				/* margin: 0; */
			}
			/* 用户字体 */
			.list-block .my-user{
				font-size :0.6rem;
				color:rgb(150,150,150);
			}
			/* 头像圆角 */
			.my-photo img{
				border-radius: 1rem;
			}
			/*商品*/
			.commodity-title{
				font-weight: bold;
				font-size: medium;
			}
			.commodity-price{
				font-weight: bold;
				color: red;
				padding-right: 5rem;
			}
			/* 用户 */
			.user-name{
				font-size :0.6rem;
				color:gray;
			}
			/* 弹窗头像input */
			#alterImg{
				    position: absolute;
				    opacity: 0;
				    width: 100%;
				    height: 100%;
			}
			/* 跳转连接颜色 */
			a{
				color: inherit;
			}
			a:active{
				color: inherit;
			}
			
			/* 卡片主内容左右边距 */
			.my-data{
				padding-right: 7rem;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page" id="app">
			<!-- 标题栏 -->
			<header class="bar bar-nav" style="background-color: yellow;">
				<h1 class="title" style="color: #000000;">发布</h1>
			</header>
			
			<!-- 工具栏 -->
			<nav class="bar bar-tab" style="background-color: yellow;">
				<a class="tab-item external " href="market-index.html">
					<span class="icon iconfont icon-chengshi"></span>
					<span class="tab-label">首页</span>
				</a>
				<a class="tab-item external active" href="#">
					<span class="icon iconfont icon-chuangzuo"></span>
					<span class="tab-label">发布商品</span>
				</a>
				<a class="tab-item external" href="market-message.html">
					<span class="icon iconfont icon-message"></span>
					<span class="tab-label">消息</span>
				</a>
				<a class="tab-item external" href="market-mymainpage.html">
					<span class="icon iconfont icon-peoplelist"></span>
					<span class="tab-label">我的</span>
				</a>
			</nav>
			

			<!-- 页面内容 -->
			<div class="content">
				<div class="list-block">
				    <ul>
				      <!-- Text inputs -->
				      <li>
				        <div class="item-content">
				          <div class="item-media"><i class="icon icon-form-name"></i></div>
				          <div class="item-inner">
				            <div class="item-input">
				              <input type="text" placeholder="标题" v-model="commodity.title">
				            </div>
				          </div>
				        </div>
				      </li>
					  <li class="align-top">
					    <div class="item-content">
					      <div class="item-media"><i class="icon icon-form-comment"></i></div>
					      <div class="item-inner">
					        <div class="item-input">
					          <textarea placeholder="添加描述..." v-model="commodity.description"></textarea>
					        </div>
					      </div>
					    </div>
					  </li>
					  <li class="align-top">
					    <div class="item-content">
					      <div class="item-media"><i class="icon icon-form-comment"></i></div>
					      <div class="item-inner">
							<div class="item-title label">图片</div>
					        <div id="" style="height: 3.5rem; width: 3.5rem;">
								<form id="imgForm" method="post" enctype="multipart/form-data">
									<input id="alterImg" name="img" type="file" @change="addImgMethod" accept="image/jpeg" />
								</form>
					        	<img id="forumPhothShow" :src="imgSrc(commodity.picture)" style="height: 100%; width: 100%;border-radius: 0.7rem;">
					        </div>
					      </div>
					    </div>
					  </li>
				      <li>
				        <div class="item-content">
				          <div class="item-media"><i class="icon icon-form-email"></i></div>
				          <div class="item-inner">
				            <div class="item-title label">价格</div>
				            <div class="item-input">
				              <input type="text" placeholder="￥" v-model="commodity.price">
				            </div>
				          </div>
				        </div>
				      </li>
				      <!-- Switch (Checkbox) -->
				      <li>
				        <div class="item-content">
				          <div class="item-media"><i class="icon icon-form-toggle"></i></div>
				          <div class="item-inner">
				            <div class="item-title label">包邮</div>
				            <div class="item-input">
				              <label class="label-switch">
				                <input type="checkbox" id="freightStatus" v-model="commodity.freightStatus==0" @click="getStatus">
				                <div class="checkbox"></div>
				              </label>
				            </div>
				          </div>
				        </div>
				      </li>
				    </ul>
				  </div>
				  <div class="content-block">
				    <div class="row">
				      <div class="">
						  <a href="#" @click="postgood(commodity)" class="button button-big button-fill button-success">
							  确认发布
						  </a>
					  </div>
				    </div>
				  </div>
			</div>
		</div>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src='../js/vue.js'></script>
		<script src='../js/axios.min.js'></script>
		<script src="../js/config.js"></script>
		
		<script type="text/javascript">
			//获取url中的参数
			function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
		</script>
		
		<script>
			//获取URL参数
			var commodityid = getUrlParam('commodityid');
			
			//VUE
			var app = new Vue({
				el:"#app",
				data:{
					loginUser:null,
					commodity:{
						title:null,
						description:null,
						price:null,
						picture:null,
						freightStatus:1,
						userId:null,
						heat:0,
						status:0,
						picture:""
					}
				},
				created() {
					//初始化加载登录用户
					this.initloginuser();
				},
				// 方法
				methods:{
					initloginuser: function() {
						axios.get(serviceIP+"/market/initloginuser",{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.loginUser = result.data.data;
						});
					},
					
					//跳转上层开启页面
					goBack:function(){
						// alert(commodity.user.id);
						window.history.go(-1)
					},
					//图片映射
					imgSrc: function(src) {
						if(src==""||src==null){
							return "../img/iconfont-tianjia.png";
						}else{
							return src;
						}
					},
					//更改包邮状态
					//0为包邮,1为不包邮
					getStatus:function(){
						if ($("#freightStatus").is(":checked")) {
							this.commodity.freightStatus=0;
							//alert("选中"+this.commodity.freightStatus);
						} else {
							this.commodity.freightStatus=1;
							//alert("未选中"+this.commodity.freightStatus);
						}
					},
					/* 更换照片 */
					addImgMethod: function() {
						var path=$("#alterImg").val();
						if(path!=null&&path!=""){
							var that = this;
							$.ajax({
								url: serviceIP+"/market/addImg",
								type: "post",
								dataType: "json",
								cache: false,
								data: new FormData($("#imgForm")[0]),
								headers: {
											"token":token,
											"refreshtoken":refreshtoken
										},
								processData: false, // 不处理数据
								contentType: false, // 不设置内容类型
								success: function(data) {
									that.commodity.picture=data.url;
									//alert(that.commodity.picture)
								}
							});
						}
					},
					//提交商品信息
					postgood:function(commodity){
						if(commodity.title==null||commodity.title==""){
							$.toast("请填写标题");
						}else if(commodity.description==null||commodity.description==""){
							$.toast("请添加描述");
						}else if(commodity.picture==null||commodity.picture==""){
							$.toast("请添加商品图片！");
						}else if(commodity.price==null||commodity.price==""){
							$.toast("价格不能为空！");
						}else{
							//$.toast("发布成功");
							commodity.userId=this .loginUser.id;
							axios.get(serviceIP+"/market/postcommodity", {
								params: {
									commodity: JSON.stringify(commodity)
								},
								headers:{"token":token,"refreshtoken":refreshtoken}
							}).then(result => {
								if (result.data.code == 200) {
									$.toast("发布成功");
									window.location="market-commodity.html?commodityid="+result.data.data.id
									// /window.history.go(-1)
								} else if (result.data.code == 400) {
									$.toast("发布文字中包含违禁词，请修改");
								}else {
									$.toast("啊呀发布中途出现小问题啦");
								}
							});
						}
					},
					
					
				},
				
			});
		</script>
		
		<script>
			$.init();
		</script>
	</body>

</html>
